<%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2021/6/29
  Time: 17:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page isELIgnored="false" contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
    <title>题库选题</title>
    <style>
        body{
            background-color: beige;
        }
        #bg_yellow,#bg_yellow2{
            width: 800px;
            height: 3px;
            background-color: orange;
        }
        .body{
            margin: 0 auto;
            width: 1005px;
            height: auto;
        }
        .left{
            float: left;
            background-color: white;
        }
        .right{
            width: 200px;
            float: left;
            height: auto;
            background-color: #0a90eb;
            position: fixed;
            left: 1150px;
        }
        a{
            color: black;
            font-family: "楷体";
            font-size: 20px;
            text-decoration: none;
        }
        #ssk{
            width: 400px;
            height: 30px;
        }
        #spn1,#spn2,#spn3{
            color: black;
            font-family: "楷体";
            font-size: 20px;
            margin-left: 50px;
        }
        .dd1,.dd2{
            float: left;
            margin-left: 20px;
        }
        .dd1{
            width: 60px;
            height:30px;
            text-align: center;
            line-height: 30px;
        }
        #head{
            margin-top: 20px;
            height: 130px;
        }
        #stl_ti{
            width: 180px;
            height: auto;
            background-color: white;
            min-height: 100px;
            margin: 0 auto;
        }
        #jrsj{
            width: 150px;
            height: 30px;
            background-color: orange;
            text-align: center;
            line-height: 30px;
            margin: 0 auto;
            margin-top: 10px;
        }
        .cha{
            width: 800px;
            height:auto;
            min-height: 200px;
            background-color: white;
            float: left;
            margin-top:20px;
            border: 1px blue double;
        }
    </style>
</head>
<body>
<div class="body">
    <div class="left">
        <div id="bg_yellow"></div>
        <div id="head">
<%--        搜索    --%>
            <div class="dd2">
            <span id="spn1">搜索   </span><input id="ssk" type="text" name="questionname">
            </div>
            <div  class="dd1" style="width: 60px;height: 30px;background-color: #0a90eb;" ><a id="ss" href="#">搜索</a></div>
    <%--        题库    --%>
            <br><br>
            <div class="dd2">
            <span  id="spn2">题库   </span>
            </div>
            <div class="dd1" style="background-color: orange" ><a href="#">全部</a></div>
    <%--        题型    --%>
            <br><br>
            <div class="dd2">
            <span  id="spn3">题型   </span>
            </div>
                <div class="dd1" id="fun1"><a id="funa1" href="#">单选</a></div>
                <div class="dd1" id="fun2"><a id="funa2" href="#">多选</a></div>
                <div class="dd1" id="fun3"><a id="funa3" href="#">填空</a></div>
        </div>
    </div>

    <div class="right"><h4 style="margin-left: 10px">试题篮</h4>
        <div id="stl_ti">
            <c:forEach items="${listid}" var="k">
                ${k}、
            </c:forEach>
        </div>
        <div id="jrsj">
            <a href="/tkxt/addId">+全部加入试卷</a>
        </div>
    </div>

    <div class="cha">

    </div>
</div>
</body>
<script type="text/javascript" src="/js/jquery.min.js" ></script>
<script>
    $(function(){
        $("#funa1").click(function(){
            $("#fun1").css("background-color"," orange");
            $("#fun2").css("background-color"," white");
            $("#fun3").css("background-color"," white");
            $("#ssk").val(null);
            $(".cha").load("<%=request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/"%>tkxt/selectdx?type=0");
        });
        $("#funa2").click(function(){
            $("#fun1").css("background-color"," white");
            $("#fun2").css("background-color"," orange");
            $("#fun3").css("background-color"," white");
            $("#ssk").val(null);
            $(".cha").load("<%=request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/"%>tkxt/selectdx?type=1");
        });
        $("#funa3").click(function(){
            $("#fun1").css("background-color"," white");
            $("#fun2").css("background-color"," white");
            $("#fun3").css("background-color"," orange");
            $("#ssk").val(null);
            $(".cha").load("<%=request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/"%>tkxt/selectdx?type=2");
        });
        $("#ss").click(function(){
            $("#fun1").css("background-color"," white");
            $("#fun2").css("background-color"," white");
            $("#fun3").css("background-color"," white");
            var k=$("#ssk").val();
            $(".cha").load("<%=request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/"%>tkxt/selectLike?questionname="+k+"");
        })
    })
</script>
</html>
